<template>
  <div class="main">
    <div class="search">
      <!-- @search="onSearch"
   -->
      <van-search v-model="value" @input="getinput" v-show="show!==3" show-action :placeholder="placeholder" @cancel="onCancel" @blur="blur" autofocus="true" />
    </div>
    <!--历史搜索、热门搜索页面组件-->
    <HistoriCalsearch :hotKeywordList="hotKeywordList" :historyKeywordList="historyKeywordList" v-if="show==1" @closepop="closepop" @transmit="transmit" />
    <!--实时搜索显示的页面组件-->
    <RealTime :getRealtimeList="getRealtimeList" v-else-if="show==2" />
    <!--视频列表组件-->
    <Listofgoods v-else :transmitlist="transmitlist" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import HistoriCalsearch from '@/components/Historicalsearch.vue'
import RealTime from '@/components/RealTime.vue'
import Listofgoods from '@/components/Listofgoods.vue'
export default {
  name: 'search',
  data() {
    return {
      value: '',
      // 搜索框默认内容
      placeholder: '',
      //历史搜索、热门搜索页面和实时搜索页面的显示
      show: 1,
      //实时搜索数据
      getRealtimeList: {},
      //从历史搜索、热门搜索页面组件传的值赋值到这
      transmitlist: ''
    }
  },
  components: {
    HistoriCalsearch,
    RealTime,
    Listofgoods
  },
  computed: {
    ...mapState({
      //获取搜索框默认内容
      SearchWindowList: state => state.login.SearchWindowList.defaultKeyword.keyword,
      //获取热门搜索列表
      hotKeywordList: state => state.login.SearchWindowList.hotKeywordList,
      //历史搜索记录
      historyKeywordList: state => state.login.SearchWindowList.historyKeywordList
    })
  },
  mounted() {
    this.getSearchWindowList()
    setTimeout(() => {
      //把搜索框默认内容赋值到placeholder上
      this.placeholder = this.SearchWindowList
    }, 200)
  },
  methods: {
    getSearchWindowList() {
      this.$store.dispatch('getSearchWindowList')
    },
    //按取消回到主页
    onCancel() {
      //回退路由
      this.$router.back(-1)
    },
    //实时搜索功能
    blur() {},
    //当搜索框里面的内容改变时触发
    getinput() {
      this.$store.dispatch('getRealtimeList', { keyword: this.value.trim() })
      setTimeout(() => {
        this.getRealtimeList = this.$store.state.login.RealtimeList
        this.show = 2
      }, 250)
    },
    //从组件传过来的参数赋值到show上，改变show的值，从而改变组件的显示
    closepop(mag) {
      this.show = mag
    },
    transmit(mag) {
      this.transmitlist = mag
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  background-color: #efefef;
  height: 100%;
}
</style>